<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>司机地图</title>
  <style type="text/css">
      #container{
          /*地图(容器)显示大小*/
          /*width:1200px;*/
          /*height:400px;*/
          /*padding: 20px;*/
      }

      #app {
          padding: 20px;
      }

      #riderCtrl {
          position: absolute;
          top: 20px;
          left: 20px;
          z-index: 2000;
          background-color: #fff;
          padding: 10px;
          border-radius: 5px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          width: 400px;
          height: 570px;
      }
  </style>

  <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
  <script src="__CDN__/assets/addons/tongcheng/js/vue.js"></script>
  <script src="__CDN__/assets/addons/tongcheng/js/element-ui/index.js"></script>
  <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/tongcheng/js/element-ui/index.css"></link>
  <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/tongcheng/css/common.css"></link>

  <!--引入Javascript API GL，参数说明参见下文-->
  <script src="https://map.qq.com/api/gljs?v=1.exp&key={$map_key}"></script>
  <!--<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>-->

</head>
<!-- 页面载入后，调用init函数 -->
<body onload="initMap()">
  <div id="app">
    <el-card>
      <div slot="header" class="clearfix">
        <span>司机地图</span>
        <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
      </div>
      <el-row>
        <el-col :span="24">
          <!-- 定义地图显示容器 -->
          <div id="container"></div>

          <div id="riderCtrl">
            <el-card>
              <div>
                <el-checkbox v-model="autoRefresh" @change="changeRefresh">自动刷新</el-checkbox>
                <el-checkbox v-model="onlyOnline" @change="changeOnline">仅查看在线司机</el-checkbox>
              </div>

              <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                <el-tab-pane :label="workTabName" name="work">
                  <el-empty description="暂无数据" v-show="workRiders.length == 0"></el-empty>

                  <el-table
                    v-show="workRiders.length > 0"
                    :data="workRiders"
                    height="450"
                    stripe
                    style="width: 100%; width: 350px;">
                    <el-table-column
                      header-align="center"
                      align="center"
                      prop="real_name"
                      label="司机姓名"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      header-align="center"
                      align="center"
                      prop="taking_order_count"
                      label="进行中订单"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      header-align="center"
                      align="center"
                      width="100"
                      prop="lat"
                      label="定位">
                      <template slot-scope="scope">
                        <el-button icon="el-icon-aim" size="mini" circle @click="positionRider(scope.row)"></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane :label="restTabName" name="rest">
                  <el-empty description="暂无数据" v-show="restRiders.length == 0"></el-empty>

                  <el-table
                    v-show="restRiders.length > 0"
                    :data="restRiders"
                    height="450"
                    stripe
                    style="width: 100%; width: 350px;">
                    <el-table-column
                      header-align="center"
                      align="center"
                      prop="real_name"
                      label="司机姓名"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      header-align="center"
                      align="center"
                      prop="taking_order_count"
                      label="进行中订单"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      header-align="center"
                      align="center"
                      width="100"
                      prop="lat"
                      label="定位">
                      <template slot-scope="scope">
                        <el-button icon="el-icon-aim" size="mini" circle @click="positionRider(scope.row)"></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</body>

<script>
  // 最大化地图
  $('#container').css('width', $('html').width() - 110).css('height', $("html").height() - 180);

  var map = null;
  var markerLayer = null;
  var marker = null;
  var isOnline = false;

  //地图初始化函数，本例取名为init，开发者可根据实际情况定义
  function initMap() {
    // //定义地图中心点坐标
    // var center = new TMap.LatLng(39.984120, 116.307484)
    // //定义map变量，调用 TMap.Map() 构造函数创建地图
    // var map = new TMap.Map(document.getElementById('container'), {
    //   center: center,//设置地图中心点坐标
    //   zoom: 17.2,   //设置地图缩放级别
    //   pitch: 43.5,  //设置俯仰角
    //   rotation: 45,    //设置地图旋转角度
    //   viewMode:'2D'
    // });


    var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
    //初始化地图
    map = new TMap.Map(container, {
      center: center,
      zoom: 17.2,   //设置地图缩放级别
      pitch: 43.5,  //设置俯仰角
      rotation: 45,    //设置地图旋转角度
      viewMode:'2D'
    });

    //创建并初始化MultiMarker
    markerLayer = new TMap.MultiMarker({
      map: map,  //指定地图容器
      //样式定义
      styles: {
        "workStyle": new TMap.MarkerStyle({
          "width": 32,  // 点标记样式宽度（像素）
          "height": 32, // 点标记样式高度（像素）
          "src": '/assets/addons/tongcheng/images/rider.png',  //图片路径
          //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
          "anchor": { x: 16, y: 32 },

          'color': '#3777FF', //颜色属性
          'size': 16, //文字大小属性
          'offset': { x: 0, y: 30 }, //文字偏移属性单位为像素
          'angle': 0, //文字旋转属性
          'alignment': 'center', //文字水平对齐属性
          'verticalAlignment': 'middle' //文字垂直对齐属性
        }),

        "restStyle": new TMap.MarkerStyle({
          "width": 32,  // 点标记样式宽度（像素）
          "height": 32, // 点标记样式高度（像素）
          "src": '/assets/addons/tongcheng/images/rider-rest.png',  //图片路径
          //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
          "anchor": { x: 16, y: 32 },

          'color': '#3777FF', //颜色属性
          'size': 16, //文字大小属性
          'offset': { x: 0, y: 30 }, //文字偏移属性单位为像素
          'angle': 0, //文字旋转属性
          'alignment': 'center', //文字水平对齐属性
          'verticalAlignment': 'middle' //文字垂直对齐属性
        }),
      },
      // //点标记数据数组
      // geometries: [{
      //   "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
      //   "styleId": 'workStyle',  //指定样式id
      //   "position": new TMap.LatLng(39.954104, 116.357503),  //点标记坐标位置
      //   "properties": {//自定义属性
      //     "title": "marker1"
      //   }
      // }, {//第二个点标记
      //   "id": "2",
      //   "styleId": 'marker',
      //   "position": new TMap.LatLng(39.994104, 116.287503),
      //   "properties": {
      //     "title": "marker2"
      //   }
      // }
      // ]
    });

    //初始化infoWindow
    var infoWindow = new TMap.InfoWindow({
      map: map,
      position: new TMap.LatLng(39.984104,116.307503),
      offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
    });
    infoWindow.close();//初始关闭信息窗关闭
    //监听标注点击事件
    markerLayer.on("click", function (evt) {
      console.log(evt);
      //设置infoWindow
      infoWindow.open(); //打开信息窗
      infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
      infoWindow.setContent("<div><img src='"+evt.geometry.properties.rider.user.avatar+"'><p>"+evt.geometry.properties.rider.real_name+"</p></div>");//设置信息窗内容
      // infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容
    })

    getRiders();
  }

  function getRiders(work_status = 'work') {
    markerLayer.setGeometries([])

    var styleId = work_status == 'work' ? 'workStyle' : 'restStyle';
    var field = work_status == 'work' ? 'workRiders' : 'restRiders';
    $.post('', {
      work_status: work_status == 'work' ? 1 : 0,
      is_online: isOnline ? 1 : 0,
    }, function(res) {
      if (res.code == 1) {
        var riders = res.data;
        app[field] = riders;
        if (riders.length > 0) {
          // var markers = [];
          var geometries = [];
          for (var i = 0; i < riders.length; i++) {
            var rider = riders[i];
            // var marker = {
            //   "id": rider.id,
            //   "styleId": 'workStyle',
            //   "position": new TMap.LatLng(rider.lat, rider.lng),
            //   "content": rider.real_name,
            //   "properties": {
            //     "title": rider.real_name
            //   }
            // };
            var geometry = {
              "id": rider.id,
              "styleId": styleId,
              "position": new TMap.LatLng(rider.lat, rider.lng),
              "content": rider.real_name,
              "properties": {
                "title": rider.real_name,
                "rider": rider,
              }
            };

            // markers.push(marker);
            geometries.push(geometry);
          }
          // markerLayer.add(markers);
          markerLayer.setGeometries(geometries);

          // 地图中心默认为最后一个司机的位置
          map.setCenter(new TMap.LatLng(riders[riders.length - 1].lat, riders[riders.length - 1].lng));
        }
      }
    });
  }

  var app = new Vue({
    el: '#app',
    data: {
      activeTab: 'work',
      workTabName: '工作中',
      restTabName: '休息中',
      workRiders: [],
      restRiders: [],
      onlyOnline: false,
      autoRefresh: false,
      timerRefresh: 0,
    },
    created() {

    },
    methods: {
      handleTabClick(tab, event) {
        console.log(this.activeTab, tab, event);

        getRiders(this.activeTab);
      },
      positionRider(rider) {
        console.log(rider);
        if (rider.lat && rider.lng) {
          map.setCenter(new TMap.LatLng(rider.lat, rider.lng));
        } else {
          this.$message.error('司机无定位信息');
        }
      },
      changeRefresh(val) {
        console.log(val);
        if (val) {
          this.timerRefresh = setInterval(() => {
            getRiders(this.activeTab);
          }, 10000);
        } else {
          clearInterval(this.timerRefresh);
        }
      },
      changeOnline(val) {
        console.log(val);
        isOnline = val;
        getRiders(this.activeTab);
      }
    }
  })
</script>

</html>